<div class="compare_pipeline_page pipeline">
    <div class="current_instance" id='compare_pipeline_<%= scope[:suffix] %>'>
        <%= text_field_tag "#{scope[:suffix]}_pipeline", scope[:pipeline].getLabel(), :class => "compare_pipeline_input" -%>
        <div class="autocomplete"></div>
        <div class="enhanced_dropdown <%= scope[:suffix]%> hidden">
            <div class="compare_search_instructions">
                <p>Search for a pipeline instance by label, commiter, date, etc.</p>
                <p>or</p>
                <p><a class="more_pipelines" id="browse_timeline_link_<%= scope[:suffix]%>">
                    Browse the timeline
                 </a></p>
            </div>
        </div>
    </div>
    <% if scope[:pipeline].isBisect() && !show_bisect? %>
        <div class="pipeline_counter_information">
            This pipeline instance cannot be used to perform a comparison because it was triggered with a non-sequential material revision.
        </div>
    <% else %>
        <div class="selected_pipeline_<%= scope[:suffix] -%> stages">
            <div class="pipeline_details">
                <%= render :partial => "stage_bar.html", :locals => {:scope => {:pipeline => scope[:pipeline]}} -%>
            </div>
        </div>
    <% end %>
</div>

<script type="text/javascript">
    Util.on_load(function() {
        var pipelineSelector = "#<%= scope[:suffix] -%>_pipeline";
        jQuery(pipelineSelector).autocomplete("<%= compare_pipelines_list_path(:pipeline_name => scope[:pipeline].name(), :other_pipeline_counter => scope[:fixed_pipeline].getCounter()) -%>", {
            minChars: 1,
            width: 500,
            scrollHeight: 500,
            matchContains: "word",
            selectFirst: false,
            autoFill: false,
            delay: 1000,
            cacheLength: 0,
            multiClickTrigger: false,
            formatItem: function(row, i, max) {
                return row;
            },
            formatMatch: function(row, i, max) {
                return "";
            },
            formatResult: function(row) {
                return row.value;
            },
            parse: function(data) {
                return data.html;
            },
            dataType: 'json',
            highlight: function(value, term) {
                return value;//no-op
            }
        });
        jQuery(pipelineSelector).result(function(event, data, formatted) {
            var dest = compare_path("<%= scope[:suffix] %>", formatted, "<%= scope[:fixed_pipeline].getCounter() %>");
            if (formatted == -1) { // indicates no match, see list.json.erb
                resetField(event.target);
            } else {
                window.location.href = dest;
            }
        });
        jQuery(pipelineSelector).blur(function(event) {
            var val = jQuery.trim(jQuery(event.target).val());
            if (val == "" || val != '<%= scope[:pipeline].getLabel() %>') {
                resetField(event.target);
            }
        });
        function resetField(field) {
            jQuery(field).val('<%= scope[:pipeline].getLabel() %>');
        }

        ;
        function compare_path(suffix, counter, fixed_counter) {
            if (suffix == "from") {
                var from_counter = counter;
                var to_counter = fixed_counter;
            } else {
                var from_counter = fixed_counter;
                var to_counter = counter;
            }
            return "/go/compare/<%= params[:pipeline_name] %>/" + from_counter + "/with/" + to_counter;
        }

        var instructionsPopup = new MicroContentPopup(jQuery('.enhanced_dropdown.<%= scope[:suffix]%>').get(0), new MicroContentPopup.NoOpHandler());
        var instructionsPopupShower = new MicroContentPopup.ClickShower(instructionsPopup);
        jQuery(pipelineSelector).bind('keypress', function(event){
            instructionsPopupShower.close();
        });
        instructionsPopupShower.bindShowButton( jQuery(pipelineSelector).get(0));

        jQuery("#browse_timeline_link_<%= scope[:suffix]%>").click(function(event) {
           Modalbox.show('<%= compare_pipelines_timeline_path(:pipeline_name => scope[:pipeline].name(), :page => 1, :other_pipeline_counter => scope[:fixed_pipeline].getCounter(), :suffix => scope[:suffix]) -%>',
                {
                    overlayClose: false,
                    title: "Select a pipeline to compare"
                });
        });
    });
</script>